
<template>
  <div class="box" v-loading="loading">
    <div class="uploadApplication">
      <p>入库备案申请表</p>
      <div style="margin-right:20px">
        <el-button v-if="nowStatus" type="primary" @click="btnSubmit">提交</el-button>
        <el-button v-if="!nowStatus" type="primary" @click="seePdf">查看</el-button>
        <el-button v-if="!nowStatus" type="primary" @click="download">下载</el-button>
      </div>
      <div class="upLoadImg">
        <upload v-if="nowStatus" :accept="'.pdf'" @beforeUpload="beforeUpload" @res="getRes" />
      </div>
    </div>
    <div v-if="isShow" v-loading="iframeDomLoading" style="margin-left:20px">
      <iframe
        id="iframeBox"
        frameborder="0"
        scrolling="auto"
        width="850"
        height="700"
        :src="$https + pdfUrl"
      />
    </div>
  </div>
</template>

<script>
import upload from "@/components/upload";

import {
  uploadProjectStoringRecordTable,
  queryFilingData
} from "@/api/storageForRecordInfo";
export default {
  components: {
    upload
  },
  data() {
    return {
      pdfUrl: "",
      pdfFlag: false,
      pdfName: "",
      pdfId: "",
      uploadText: "上传",
      fileData: {
        fileName: "",
        fileUrl: "",
        id: ""
      },
      isShow: false,
      loading: false,
      nowStatus: false,
      iframeDomLoading: false
    };
  },
  created() {
    if (localStorage.getItem("router") == "STORING_RECORD_APPLICATION_UPLOAD") {
      this.nowStatus = true;
    } else {
      this.getFujian();
    }

    if (localStorage.getItem("lookStatus") == 2) {
      this.nowStatus = true;
      this.getFujian();
    }
  },
  methods: {
    // 下载当前pdf
    download() {
      var a = document.createElement("a");
      a.setAttribute(
        "href",
        this.$https + "/pc/file/download?id=" + this.pdfId
      );
      a.click();
    },
    // 查看当前PDF
    seePdf() {
      var that = this;
      this.isShow = true;
      this.iframeDomLoading = true;
      this.$nextTick(() => {
        var iframeDom = document.getElementById("iframeBox");
        iframeDom.onload = function(e) {
          that.iframeDomLoading = false;
        };
      });
    },
    getFujian() {
      const _data = {
        projectId: localStorage.getItem("projectId")
      };
      queryFilingData(_data).then(res => {
        if (res.data) {
          this.pdfName = res.data.fileName;
          this.pdfUrl = res.data.filePath;
          this.pdfId = res.data.id;
        }
      });
    },
    btnSubmit() {
      if (this.fileData.id == "") {
        this.$message({
          message: "请先上传入库备案申请表",
          type: "warning"
        });
        return;
      }
      const obj = {
        projectId: localStorage.getItem("projectId"),
        projectStoringRecordTableId: this.fileData.id
      };
      this.loading = true;
      uploadProjectStoringRecordTable(obj)
        .then(res => {
          this.loading = false;
          this.uploadText = "上传";
          this.$alert("当前流程办理完成", "提示", {
            confirmButtonText: "确定",
            callback: action => {
              this.$router.push({
                path: "/xmkgh/ywdeal"
              });
            }
          });
        })
        .catch(() => {
          this.loading = false;
        });
    },
    // 上传前
    beforeUpload() {},
    // 上传后
    getRes(res) {
      this.fileData.fileName = res.data.fileName;
      this.fileData.fileUrl = res.data.filePath;
      this.fileData.id = res.data.id;
      if (res.data.filePath != null) {
        this.isShow = true;
      }
      this.$message({
        message: "上传成功",
        type: "success"
      });
    }
  }
};
</script>

<style lang="scss" scoped>
.form /deep/ .el-input__inner {
  width: 200px;
}
.upLoadImg {
  display: flex;
  align-items: center;
  p {
    margin-left: 20px;
  }
}
.box {
  padding: 0 30px;
  .uploadApplication {
    padding: 30px;
    display: flex;
    align-items: center;
    p {
      font-size: 13px;
      color: #444;
      font-weight: bold;
      margin-right: 20px;
    }
  }
}
</style>
